@import '../../css/Variable.styl'

.tagList
  &__list
    margin standardSpacing
    padding 0
    list-style none
    text-align center
    &__item
      display flex
      padding standardSpacing
      background-color lightGrey1
      border-radius standardBorderRadius
      flex 1
      overflow hidden
      // NOTE - RJ - 2021-07-09 positioning puts the item above the triangle
      // allowing the label to be selectable from the start
      position relative
      &__info
        text-overflow ellipsis
        overflow hidden
        flex 1
        text-align start
        white-space pre
      &__circle
        width 10px
        height 10px
        top calc(50% - 5px)
        position absolute
        background-color lightGrey2
        border-radius standardBorderRadius
        left 10px
      &__triangleIcon
        font-size 40px
        transform rotate(58deg)
        transform-origin top
        margin-inline-end -14px
        position relative
        left 16px
        top 15px
        color lightGrey1
      &__wrapper
        position relative
        display flex
        flex-direction row
        margin-inline-start standardSpacing
        margin-bottom standardSpacing

[dir=rtl]
  .tagList__list__item
    &__circle
      right 10px
    &__triangleIcon
      left 9px
      top 2px
  #triangeIcon
    transform none

@media (max-width: max-lg)
  .tagList
    width 100%

@media (max-width: min-sm) and (max-width: max-sm)
  .tagList
    &__list
      &__item
        width 85%

@media (max-width: max-xs)
  .tagList
    &__wrapper
      height auto
    &__list
      height auto
      overflow-y auto
